@height: 1.062802rem;
@colorwhite: white;

    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        header {
            height: @height;
            background-color: @colorwhite;
            text-align: center;
            line-height: @height;
            font-size: 24px;
        }

        main {
            flex: 1;
            position: relative;

            p {
                width: 100%;
                height: 100%;
                background: url(../img/advertisement-bg.jpg) no-repeat center;
                background-size: 30.917874rem;
            }

            h2 {
                font-size: .57971rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: transparent;
                white-space: nowrap;
                animation: holdOn 1s linear forwards;
            }

            div {
                width: 2.415459rem;
                height: .966184rem;
                line-height: .966184rem;
                border-radius: .483092rem .483092rem .483092rem .483092rem;
                text-align: center;
                background-color: white;
                border: 1px solid rgba(187, 187, 187, 100);
                position: absolute;
                top: .676329rem;
                right: .555556rem;
            }
        }
    }

@keyframes holdOn {
    0% {}

    25% {
        color: rgba(255, 255, 255, .2);
        font-size: .772947rem;
        top: 60%
    }

    50% {
        color: rgba(255, 255, 255, .4);
        top: 70%;
        font-size: .917874rem;
    }

    75% {
        color: rgba(255, 255, 255, .6);
        top: 80%;
        font-size: 1.014493rem;
    }

    100% {
        color: rgba(255, 255, 255, 1);
        top: 75%;
        font-size: 1.15942rem;
    }
}